<template>
    <div>
        <h1>Rate 评分</h1>
        <Anchor title="概述" h2></Anchor>
        <p>对事物进行快速的评级操作，或对评价进行展示。</p>
        <Anchor title="代码示例" h2></Anchor>
        <Demo title="基础用法">
            <div slot="demo">
                <Rate v-model="value"></Rate>
            </div>
            <div slot="desc">
                <p>基本用法。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.base }}</i-code>
        </Demo>
        <Demo title="半星">
            <div slot="demo">
                <Rate allow-half v-model="valueHalf"></Rate>
            </div>
            <div slot="desc">
                <p>设置属性 <code>allow-half</code> 可以选中半星。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.half }}</i-code>
        </Demo>
        <Demo title="显示提示">
            <div slot="demo">
                <Row>
                    <Col span="12">
                    <Rate show-text v-model="valueText"></Rate>
                    </Col>
                    <Col span="12">
                    <Rate show-text allow-half v-model="valueCustomText">
                        <span style="color: #f5a623">{{ valueCustomText }}</span>
                    </Rate>
                    </Col>
                </Row>
            </div>
            <div slot="desc">
                <p>设置属性 <code>show-text</code> 可以显示提示文字。</p>
                <p>提示内容也可以通过 slot 自定义。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.text }}</i-code>
        </Demo>
        <Demo title="只读">
            <div slot="demo">
                <Rate disabled v-model="valueDisabled"></Rate>
            </div>
            <div slot="desc">
                <p>设置属性 <code>disabled</code> 开启只读模式，无法交互。</p>
            </div>
            <i-code lang="html" slot="code">{{ code.disabled }}</i-code>
        </Demo>

        <!--<ad></ad>-->

        <div class="api">
            <Anchor title="API" h2></Anchor>
            <Anchor title="Rate props" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>count</td>
                    <td>star 总数</td>
                    <td>Number</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>当前 star 数，可以使用 v-model 双向绑定数据</td>
                    <td>Number</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>allow-half</td>
                    <td>是否允许半选</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否只读，无法进行交互</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>show-text</td>
                    <td>是否显示提示文字</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>clearable</td>
                    <td>是否可以取消选择</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                </tbody>
            </table>
            <Anchor title="Rate events" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-change</td>
                    <td>评分改变时触发</td>
                    <td>value</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import iCode from './code/code';
	import Code from './code/rate';
	export default {
		name: 'HelloWorld',
		components: {
			Anchor,
			Demo,
			iCode,
			Code,
		},
		mounted () {

        },
		methods: {

		},
		data () {
			return {
				code:Code,
				value: 0,
				valueHalf: 2.5,
				valueText: 3,
				valueCustomText: 3.8,
				valueDisabled: 2
            }
		},
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
    span.copy, span.scale, span.open-fiddle{
        border-radius: 0 0 3px 3px;
        padding: 2px 5px;
        position: absolute;
        top: 5px;
        right: 0;
        color: #b2b2b2;
        cursor: pointer;
    }
    span.scale{
        right: 25px;
    }
    span.open-fiddle{
        right: 50px;
    }
    .bg + span.copy{
        right: 5px;
    }
    span.copy:hover, span.scale:hover, span.open-fiddle:hover{
        color: #5c6b77;
    }

    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
